<template>
    <div class="baseDiv">
        <div class="title">
            <div>
                <img class="title-img" src="../../assets/images/log.png">
            </div>
            <div class="title-font">东风（十堰）车身部件有限责任公司子件领料管理板</div>
            <div class="title-time">{{nowTime}}</div>
        </div>
         <div class="imgBox leftFloat">
           <img class="baseImg" src="../../assets/images/fengjian.png" alt="" />
         </div>
        <div class="title-left">
            <el-row>
                <el-col :span="17">
                    <div class="title-left-title">发料进度统计</div>
                    <el-row>
                        <el-col :span="6"><div style="color:rgba(255,255,255,0)">.</div></el-col>
                        <el-col :span="18"><div class="total">计划品种</div><div class="total-qty">{{total}}</div></el-col>
                        <!--<el-col :span="11"><div class="qty">完成品种</div><div class="total-qty">{{qty}}</div></el-col>-->
                    </el-row>
                </el-col>
                <el-col :span="7">
                    <div class="title-left-font">发料执行率:</div>
                    <el-progress class="dashboard" :width="100" type="dashboard" :stroke-width="10" :percentage="qtyT" :color="colors"></el-progress>
                </el-col>
            </el-row>
        </div>
        <div class="title-right">
            <!--<el-progress :text-inside="true" :format="formatTotal" :stroke-width="24" :percentage="100"></el-progress>
            <el-progress :text-inside="true" :format="formatQty" :stroke-width="24" :percentage="qtyT" status="success"></el-progress>
            <div class="total">计划品种数</div>
            <div class="qty">完成品种数</div>-->
            <el-row>
                <el-col :span="8"><div class="qty">完成品种</div><div class="total-hasQty">{{qty}}</div></el-col>
               <!-- <el-col :span="2"><div style="color:rgba(255,255,255,0)">.</div></el-col>-->
                <el-col :span="8"><div class="total">未完成品种</div><div class="total-noQty">{{total-qty}}</div></el-col>
                <!--<el-col :span="2"><div style="color:rgba(255,255,255,0)">.</div></el-col>-->
                <el-col :span="8"><div class="qty">未入库品种</div><div class="total-emptyQty">{{emptyQty}}</div></el-col>
            </el-row>
        </div>
        <!--<div class="title-center">
            <div class="noQty">发料详情：</div>
            &lt;!&ndash;<div class="emptyQty">未入库品种数：{{emptyQty}}</div>&ndash;&gt;
        </div>-->
        <el-table
                class="emptyTable"
                highlight-current-row
                :header-cell-style="{'text-align':'center'}"
                :data="list"
                border
                style="width: 100%;">
            <el-table-column type="index" label="序号" width="80">
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    prop="graphNo"
                    label="零件图号"
                    width="320"
            >
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    prop="itemName"
                    label="零件名称"
                    width="320"
            >
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    prop="billQuantity"
                    label="需求数量"
                    min-width="120"
            >
            </el-table-column>
            <el-table-column
                    label="未完成数"
                    min-width="120"
            >
                <template slot-scope="scope">
                    <div>{{ scope.row.outQuantity }}</div>
                </template>
            </el-table-column>
            <el-table-column
                    show-overflow-tooltip
                    label="状态"
                    min-width="140"
            >
            </el-table-column>
        </el-table>
        <vue-seamless-scroll :data="inventoryBalances" class="seamless-warp" :class-option="classOption">
            <el-table
                    class="noEmptyTable"
                    :show-header="false"
                    v-loading="loading.inventoryTable"
                    highlight-current-row
                    :data="inventoryBalances"
                    border
                    height="calc(100%)"
                    @selection-change="handleSelectionChange"
                    :cell-style="{ textAlign: 'center' }"
                    style="width: 100%">
                <el-table-column type="index" label="序号" width="80">
                </el-table-column>
                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="graphNo"
                        label="零件图号"
                        width="320"
                >
                </el-table-column>
                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="itemName"
                        label="零件名称"
                        width="320"
                >
                </el-table-column>
                <el-table-column
                        sortable
                        show-overflow-tooltip
                        prop="billQuantity"
                        label="应发数量"
                        min-width="120"
                >
                </el-table-column>
                <el-table-column
                        sortable
                        label="未完成数"
                        min-width="120"
                >
                    <template slot-scope="scope">
                        <div>{{ scope.row.noQty }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        sortable
                        show-overflow-tooltip
                        label="状态"
                        min-width="140"
                >
                    <template slot-scope="scope">
                        <!--<el-tag   v-if="scope.row.flag == 1"   type=""   effect="dark">已完成</el-tag>
                        <el-tag   v-if="scope.row.flag == 2"   effect="dark" type="success">部分发交</el-tag>
                        <el-tag   v-if="scope.row.flag == 3"   effect="dark" type="success">未入库</el-tag>
                        <el-tag   v-if="scope.row.flag == 4"   effect="dark" type="success">在库</el-tag>
                        <el-tag   v-if="scope.row.flag == 5"   effect="dark" type="success">已出厂</el-tag>
                        <el-tag   v-if="scope.row.flag == 6"   effect="dark" type="success">已送达</el-tag>-->
                        <div   v-if="scope.row.flag == 1"   style="background-color: green;font-size: 18px">已领用</div>
                        <div   v-if="scope.row.flag == 2"   style="background-color: yellow;color:black;font-size: 18px">部分发料</div>
                        <div   v-if="scope.row.flag == 4"   style="background-color: red;font-size: 18px">未入库</div>
                        <div   v-if="scope.row.flag == 3"   style="background-color: yellow;color:black;font-size: 18px">在库</div>
                    </template>
                </el-table-column>
            </el-table>
            <!--</div>-->
        </vue-seamless-scroll>
    </div>
</template>

<script>
    import vueSeamlessScroll from 'vue-seamless-scroll'
    export default {
        data() {
            return {
                nowTime:"",
                list:[],
                percentage: 10,
                colors: [
                    {color: 'yellow', percentage: 20},
                    {color: '#8be2ed', percentage: 40},
                    {color: '#10a9eff5', percentage: 60},
                    {color: '#1023eff5', percentage: 80},
                    {color: 'green', percentage: 100}
                ],
                inventoryBalances: [],
                qtyTotal:'0%',
                qtyT:0,
                noQty:0,
                emptyQty:0,
                qty:0,
                total:0,
                searchData: {
                    pageNum: 1,
                    pageSize: 15,
                    total: null,
                    keyWords: "",
                    factoryCode: PF.getLocal('factoryCode'),
                    organizationId: null,
                    itemName: "",
                    itemCode: "",
                    contCode:'',
                    graphNo:'',
                    wareName: "",
                    wareCode: "",
                    cellCode:'',
                    typeCodeList:null,
                    itemTypeCode:''
                },
                loading:{
                    itemTable:true,
                    inventoryTable:true
                },
                CardPartsStatisticsList:[]
            }
        },
        components: {    //组件
            vueSeamlessScroll
        },
        computed: {

            classOption () {
                return {
                    step: 0.7, // 数值越大速度滚动越快
                    limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
        },
        created() {
            //this.getInventoryBalanceData();
            //this.start();
            this.showTimes();
        },
        beforeDestroy() {
            clearInterval(this.timer);
            clearInterval(this.timerTwo);
        },
        methods:{
            start(){
                this.timer = setInterval(this.getInventoryBalanceData, 10000); // 注意: 第一个参数为方法名的时候不要加括号;
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getInventoryBalanceData();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.searchData.pageSize = val;
                this.getInventoryBalanceData();
            },
            getInventoryBalanceData() {
                this.searchData.pageNum += 1;
                let searchData = PF.JSON(this.searchData);
                if (!PF.isNull(searchData.itemCode)) {
                    delete searchData.itemCode;
                }
                if (!PF.isNull(searchData.itemName)) {
                    delete searchData.itemName;
                }

                searchData.pageSize = searchData.pageSize;
                this.loading.inventoryTable = true;
                IOT.getServerData(
                    /*"/inventorys/findGroupByWareOrgItem",*/
                    "/transfer/master/findDpDatePro",
                    "get",
                    searchData,
                    (ret) => {
                        console.log("查询生产领料报表返回：",ret)
                        if (ret.code === 200) {
                            this.total = 0
                            this.qty = 0
                            this.qtyT = 0
                            this.noQty = 0
                            this.emptyQty = 0
                            this.qtyTotal = '0%'
                            let list = ret.rows;
                            if (list.length > 0){
                                list.forEach(item =>{
                                    if (item.outQuantity > item.billQuantity) {
                                        item.noQty = 0;
                                    }else {
                                        item.noQty = item.billQuantity - item.outQuantity;
                                    }
                                    this.total += 1;
                                    if (item.flag == 1){
                                        this.qty += 1;
                                    }
                                    if (item.flag == 4){
                                        this.emptyQty += 1;
                                    }
                                })
                                let q = this.qty/this.total;
                                q = q * 100;
                                q = q.toFixed(2);
                                this.qtyT = q;
                                this.qtyTotal = q + "%";
                            }else {
                                this.total = 0
                                this.qty = 0
                                this.qtyTotal = '0%'
                                this.qtyT = 0
                                this.emptyQty = 0
                            }
                            this.inventoryBalances = list;
                        } else {
                            IOT.tips(
                                ret.message || "服务器请求失败，稍后再试！",
                                "error"
                            );
                        }
                    }
                );
                this.loading.inventoryTable = false;
            },

            // 显示当前时间
            timeFormate(timeStamp) {
                let year = new Date(timeStamp).getFullYear();
                let month =
                    new Date(timeStamp).getMonth() + 1 < 10
                        ? "0" + (new Date(timeStamp).getMonth() + 1)
                        : new Date(timeStamp).getMonth() + 1;
                let date =
                    new Date(timeStamp).getDate() < 10
                        ? "0" + new Date(timeStamp).getDate()
                        : new Date(timeStamp).getDate();
                let hh =
                    new Date(timeStamp).getHours() < 10
                        ? "0" + new Date(timeStamp).getHours()
                        : new Date(timeStamp).getHours();
                let mm =
                    new Date(timeStamp).getMinutes() < 10
                        ? "0" + new Date(timeStamp).getMinutes()
                        : new Date(timeStamp).getMinutes();
                let ss =
                    new Date(timeStamp).getSeconds() < 10
                        ? "0" + new Date(timeStamp).getSeconds()
                        : new Date(timeStamp).getSeconds();
           /*     let week = new Date(timeStamp).getDay();
                let weeks = ["日", "一", "二", "三", "四", "五", "六"];
                let getWeek = "星期" + weeks[week];*/
                let nowTime= year + "-" + month + "-" + date +" " + hh + ":" + mm + ":" + ss;
               // console.log("nowTime:",nowTime)
                return nowTime;

            },
            showTimes() {
                this.timerTwo = setInterval(()=>{
                    this.nowTime = this.timeFormate(new Date())
                }, 1000);
               // this.clear();
            },
            formatTotal() {
                return this.total;
            },
            formatQty() {
                return this.qty;
            }
        }
    }


</script>


<style>
    .title{
        height: 70px;
        width: 100%;
        background-color: black;
        position: fixed;
    }
    .title-font{
        text-align: center;
        font-size: 40px;
        color: white;
        height: 70px;
        line-height: 70px;
    }
    .title-img{
        position: fixed;
        width: 300px;
        margin-top: 10px;
    }
    .title-time{
        float: right;
        margin-right: 30px;
        color: white;
        margin-top: -40px;
        font-size: 24px;
    }
    .imgBox {
        width: 100%;
        height: 100%;
        margin-top: 70px;
    }
    .baseImg {
        background-size: 100% 100%;
        height: 100vh;
        position: fixed;
        width: 100vw;
    }
    .seamless-warp{
        width: 94%;
        height: calc(100% - 516px);
        /*height:100vh;*/
        overflow: hidden;
        margin: 35px 3% 10% 3%;
    }
    .emptyTable  .el-table__body-wrapper{
        display: none;
    }
    .noEmptyTable{
        background-color:rgba(255,255,255,0);
        height: calc(100% - 516px) !important;
    }
    .noEmptyTable .el-table__body-wrapper .el-table__empty-block{
        display: none;
    }
    .noEmptyTable .el-table__body-wrapper{
        height: 100% !important;
    }
    .title-left{
        font-size:20px;
        color: white;
        width: 21%;
        float: left;
        margin-top: 0.5%;
        margin-left: 3%;
    }
    .title-left-font{
        color: #83f5ff;
        position: relative;
        display: inline-block;
        margin-bottom: 20px;
    }
    .total-qty{
        margin-left: 20%;
    }
    .total-hasQty{
        margin-left: 15%;
        height: 60px;
        width: 60px;
        background-color: green;
        border-radius: 30px;
        text-align: center;
        line-height: 60px;
    }
    .total-noQty{
        margin-left: 15%;
        height: 60px;
        width: 60px;
        background-color: yellow;
        border-radius: 30px;
        text-align: center;
        line-height: 60px;
        color: black;
    }
    .total-emptyQty{
        margin-left: 15%;
        height: 60px;
        width: 60px;
        background-color: red;
        border-radius: 30px;
        text-align: center;
        line-height: 60px;
    }
    .title-left-title{
        color: #83f5ff;
        position: relative;
        margin-bottom: 20px;
    }
    .title-right{
        color: white;
        position: relative;
        /*margin-left: 5%;*/
        padding-top: 15px;
        float: right;
        width: 20%;
        margin-right: 3%;
        font-size:20px;
    }
    .title-right .el-progress{
        line-height: 2.5 !important;
    }
    .title-right /deep/ .el-progress-bar__outer{
        background-color:red !important;
    }
    .title-center{
        color: white;
        position: absolute;
        padding-top: 10%;
        font-size:22px;
        text-align: center;
        width: 100vw;
    }
    .noQty{
        display: inline-block;
        margin-right: 50px;
    }
    .emptyQty{
        display: inline-block;
    }
    .total{
        padding-top:10px;
        margin-bottom: 20px;
    }
    .qty{
        padding-top: 10px;
        margin-bottom: 20px;
    }
    .dashboard .el-progress__text{
       /* position: absolute;*/
        color: white;
    }
    .emptyTable{
        top:35px;
        color:white;
        margin: 0 3% 0 3%;
        width: 94% !important;
        background-color:rgba(255,255,255,0);
        font-family: "微软雅黑";
        font-size: 20px;
    }
    .emptyTable thead tr th{
        border: 0;
        color:white;
        background-color: transparent !important;
    }
    .noEmptyTable{
        /* 表格字体颜色 */
        color:white;
        /* 表格边框颜色 */
        /* border: 0.5px solid #758a99; */
        height: 500px;
        font-size: 20px;
        background-color:rgba(255,255,255,0)
    }
    /* 表格内背景颜色 */
    .noEmptyTable th, .el-table tr,.el-table td{
        border: 0;
        background-color: transparent;
        font-family: "微软雅黑";
    }
    /* 使表格背景透明 */
    .noEmptyTable th, .el-table tr {
        background-color: transparent;
    }
    /* 删除表格下横线 */
    .noEmptyTable::before {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0px;
    }
    /* 表格表头字体颜色 */
    .noEmptyTable thead {
        color: white;
        font-weight: 500;
        background-color: rgba(148, 144, 144, 0.3)
    }

</style>

